<template>
  <div class="main">
    <a-card 
      hoverable 
      class="text"
      :loading="loading"
      style="width: 240px; height: 110px"
      :bordered="false">
      <div class="image">
        <slot></slot>
      </div>
      <div class="meta">
        <div class="card-title">{{ title }}</div>
        <div class="card-content">{{ content }}</div>
      </div>
    </a-card>
  </div> 
</template>


<script>
  export default {
    name: "CardShow",
    props: {
      title: {
        type: String,
        default: ''
      },
      content: {
        default: ''
      },
      loading: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style lang="less" scoped>
  .main {
    position: relative;
    overflow: hidden;
    width: 100%;

    .meta {
      position: absolute;
      top: 17px;
      right: 50px;
    }
    .card-title {
      color: rgba(0, 0, 0, .45);
      font-size: 14px;
      line-height: 22px;
    }

    .card-content {
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
      color: #000;
      margin-top: 4px;
      margin-bottom: 0;
      font-size: 30px;
      line-height: 38px;
      height: 38px;
    }
  }
</style>